<%@page contentType="text/html; charset=utf-8"%>
<%@include file="/WEB-INF/views/common/taglibs.jspf" %>


<link rel="stylesheet" href="${ctx}/static/plugins/zTree/css/zTreeStyle/zTreeStyle.css" />
<link rel="stylesheet" href="${ctx}/static/plugins/jqwidgets/jqwidgets/styles/jqx.base.css" />
<link rel="stylesheet" href="${ctx}/static/plugins/jqwidgets/jqwidgets/styles/jqx.arctic.css" />
 
<title>系统资源管理</title>

<div class="page-header">
	<h1>
		资源列表 
	</h1>
</div>
<div class="row">
	<div class="col-xs-12">
		<div class="row">
			<div class="col-xs-12">
				<div class="pull-left">
					<button class="btn btn-success btn-xs height-30" onclick="formDialog();"><i class="ace-icon fa fa-plus bigger-120"></i> 新增</button>
					<button class="btn btn-info btn-xs height-30" onclick="edit();"><i class="ace-icon fa fa-pencil bigger-120"></i> 编辑</button>
					<button class="btn btn-danger btn-xs height-30" onclick="del();"><i class="ace-icon fa fa-trash bigger-120"></i> 删除</button>
					<button class="btn btn-success pink btn-xs height-30" onclick="jqxTg.jqxTreeGrid('render');"><i class="ace-icon fa fa-refresh fa-spin bigger-120"></i> 刷新</button>
				</div>
			</div>
		</div>
		<div class="space-2"></div>
	
		<div class="row">
			<div class="col-xs-12">
			
				<div id="treeGrid"></div>
				
			</div>
		</div>
		
		
		<!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div><!-- /.row -->

<script type="text/javascript">
var jqxTg ;
var scripts = [null, 
               "${ctx}/static/plugins/zTree/js/jquery.ztree.core-3.5.js", 
               "${ctx}/static/plugins/zTree/js/jquery.ztree.excheck-3.5.js", 
               "${ctx}/static/plugins/jqwidgets/jqwidgets/jqxcore.js", 
               "${ctx}/static/plugins/jqwidgets/jqwidgets/jqxbuttons.js", 
               "${ctx}/static/plugins/jqwidgets/jqwidgets/jqxdata.js", 
               "${ctx}/static/plugins/jqwidgets/jqwidgets/jqxscrollbar.js", 
               "${ctx}/static/plugins/jqwidgets/jqwidgets/jqxdatatable.js", 
               "${ctx}/static/plugins/jqwidgets/jqwidgets/jqxtreegrid.js", 
               null];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	jQuery(function($) {
		var source = {
				dataType: "json", url: "${ctx}/admin/sys/resource/list",
				id: "id", hierarchy: {keyDataField: {name: "id"}, parentDataField: {name: "parentId"}},
				dataFields: [
					{name: "id", type: "number"},
					{name: "name", type: "string"},
					{name: "href", type: "string"},
					{name: "identity", type: "string"},
					{name: "type", type: "string"},
					{name: "weight", type: "number"},
					{name: "showView", type: "string"},
					{name: "parentIds", type: "string"},
					{name: "parentIdentity", type: "string"}, 
					{name: "parentId", type: "string"}, 
					{name: "expanded", type: "bool"}, 
				]
		};
		var dataAdapter = new $.jqx.dataAdapter(source);
		jqxTg = $("#treeGrid").jqxTreeGrid({
			source: dataAdapter,
			width: "full", columnsHeight: 50,
			columns: [
				{text: "编号", dataField: "id", width: 100},
				{text: "名称", dataField: "name", width: 120},
				{text: "权限标示", dataField: "identity", width: 200},
				{text: "全名", dataField: "parentIdentity", width: 300},
				{text: "类型", dataField: "type", width: 60, cellsRenderer: function (row, column, value, rowData){
					return (value=="menu"?"<span style='color:green'>菜单</span>":"<span style='color:red'>操作</span>") ; 
				}},
				{text: "是否显示", dataField: "showView", width: 80, cellsRenderer: function (row, column, value, rowData){
					return (value==true?"显示":"<span style='color:#ccc'>隐藏</span>") ; 
				}},
				{text: "排序", dataField: "weight", width: 60},
				{text: "父节点路径", dataField: "parentIds", width: 150},
				{text: "链接地址", dataField: "href", width: "auto"}
			]
		});
		
		
		
	});
});

function formDialog(id){
	var url = "${ctx}/admin/sys/resource/form" ;
	if(undefined != id && id != "") {
		url = "${ctx}/admin/sys/resource/form?id="+id ;
	}
	var loadIndex = layer.load(0, {shade : [0.3]});
	$.ajax({
		url: url, cache:false
	}).error(function(event, XMLHttpRequest, ajaxOptions, thrownError){
		if(event.status == 404) {layer.close(loadIndex); $.dialog.tips("404请求地址不正确！", 2, "fa-times red"); } 
		else {layer.close(loadIndex); $.dialog.tips("请求发生错误，错误代码："+event.status, 2, "fa-times red"); }
	}).done(function(result){
		dialogIndex = layer.open({
		    type: 1, //page层
		    area: ['900px', '600px'],
		    title: (undefined==id?'添加':'编辑'),
		    shade: 0.6, //遮罩透明度
		    shift: 2, //0-6的动画形式，-1不开启 
		    scrollbar: false, //禁用浏览器滚动条
		    content: result,
		    success: function(layero, index){ layer.close(loadIndex); },
		    btn: ['提交', '取消'],
		    yes: function(index, layero){
		    	if(undefined == id) {
		    		ajax("${ctx}/admin/sys/resource/add") ;
		    	} else {
		    		ajax("${ctx}/admin/sys/resource/update") ;
		    	}
		    },cancel: function(index){}
		}); 
	});
};

function ajax(_url) {
	if($("#form").valid()) {
		var msgIndex = layer.msg('数据提交中...', { icon: 17, shade: [0]}); 
		var data = $.shine.serializeObject("#form");
		
		$.ajax({
			type: "POST",
			url: _url,
			data: data, dataType: "JSON",
		}).error(function(event, XMLHttpRequest, ajaxOptions, thrownError){
			layer.close(msgIndex);
		}).done(function(result){
			if(result.error != null  && result.error != undefined) {
				layer.msg('发生错误！', { icon: 2, time: 1000, shade: [0] }, function(){ layer.close(msgIndex); }); 
			} else {
				jqxTg.jqxTreeGrid('render') ;
				layer.close(msgIndex); layer.close(dialogIndex) ;
				$.gritter.add({
					text: '<i class="ace-icon fa fa-check bigger-150"></i>&nbsp;&nbsp;&nbsp;<span class="bigger-150">'+result.message+'</span>',
					class_name: 'gritter-success'
				});
			}
		});
	}
}

function edit() {
	var selection = jqxTg.jqxTreeGrid("getSelection") ;
	if(selection.length > 0) {
		formDialog(selection[0].id); 
	} else {
		$.gritter.add({
			text: '<i class="ace-icon fa fa-check bigger-150"></i>&nbsp;&nbsp;&nbsp;<span class="bigger-150">请选择要删除的数据行！</span>',
			class_name: 'gritter-warning'
		});
	}
}

function del() {
	var selection = jqxTg.jqxTreeGrid("getSelection") ;
	if(selection.length > 0) {
		$.dialog.confirm('你确定要删除吗？', function(){
			$.ajax({
				type: "GET", dataType: "JSON",
				url: "${ctx}/admin/sys/resource/delete/"+selection[0].id,
			}).error(function(event, XMLHttpRequest, ajaxOptions, thrownError){
				layer.msg('删除发生错误！', { icon: 2, time: 1000, shade: [0] }); 
			}).done(function(result){
				if(result.error != null  && result.error != undefined) {
					layer.msg('删除发生错误！', { icon: 2, time: 1000, shade: [0] }); 
				} else {
					if(result.success) {jqxTg.jqxTreeGrid('render') ;}
					$.gritter.add({
						text: '<i class="ace-icon fa '+(result.success?'fa-check':'fa-warning')+' bigger-150"></i>&nbsp;&nbsp;&nbsp;<span class="bigger-150">'+result.message+'</span>',
						class_name: (result.success?'gritter-success':'gritter-error')
					});
				}
			});
		}, function(){
		    $.dialog.tips('执行取消操作');
		});
	} else {
		$.gritter.add({
			text: '<i class="ace-icon fa fa-check bigger-150"></i>&nbsp;&nbsp;&nbsp;<span class="bigger-150">请选择要删除的数据行！</span>',
			class_name: 'gritter-warning'
		});
	}
}

</script>


